<template>
	<view style="padding: 30rpx; padding-top: 100rpx;">
		<view class="input-group" style="margin-bottom: 50rpx;">
			<text style="font-size: 32rpx; color: #333;">输入值:</text>
			<input type="text" v-model="title"
				style="color: red; border: 1px solid #eee; padding: 15rpx; margin-left: 20rpx; flex: 1; font-size: 30rpx;"
				placeholder="请输入要传递的值（如Hello）" />
		</view>


		<view class="input-group" style="margin-bottom: 50rpx;">
			<text style="font-size: 32rpx; color: #333;">回传值:</text>
			<input type="text" :value="callBackValue" style="color:aquamarine; border: 1px solid #eee; padding: 15rpx; margin-left: 20rpx; flex: 1; font-size:
			30rpx;" readonly placeholder="等待子组件B回传值..." />
		</view>

		<comA :intent="title"
			style="background: #f5f5f5; padding: 30rpx; border-radius: 10rpx; margin-bottom: 50rpx;" />


		<comB @callBackFun="handleChildCallback" style="background: #f5f5f5; padding: 30rpx; border-radius: 10rpx;" />
	</view>
</template>

<script>
	// 导入子组件A和子组件B
	import comA from '../../components/compA/compA.vue';
	import comB from '../../components/compB/compB.vue';

	export default {
		components: {
			comA,
			comB
		}, // 注册子组件，确保模板中可使用
		data() {
			return {
				title: '', // 存储用户输入值，用于传递给子组件A
				callBackValue: '' // 存储子组件B的回传值，用于页面展示
			};
		},
		methods: {
			// 5. 处理子组件B的回传逻辑
			handleChildCallback(childData) {
				console.warn("---父组件IntentPage---接收子B回传值：", childData);
				this.callBackValue = childData; // 更新回传值，页面实时展示

				// 可选：添加回传成功提示（提升用户体验）
				uni.showToast({
					title: `回传成功：${childData}`,
					icon: "none",
					duration: 1500
				});
			}
		}
	};
</script>

<style scoped>
	/* 统一输入区域布局 */
	.input-group {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
</style>